<template>
    <div class="container">
        <h1>添加新闻</h1>
        <form @submit.prevent="submitForm">
            <div v-if="errorMessages.length" class="error">
                <p v-for="(error, index) in errorMessages" :key="index">{{ error }}</p>
            </div>
            <div>
                <label for="title">标题</label>
                <input type="text" id="title" v-model="title" placeholder="请输入新闻标题" required />
            </div>
            <div>
                <label for="content">内容</label>
                <textarea id="content" v-model="content" placeholder="请输入新闻内容" required rows="5" cols="40"></textarea>
            </div>
            <div>
                <label for="author">作者</label>
                <input type="text" id="author" v-model="author" placeholder="请输入新闻作者" required />
            </div>
            <div>
                <label for="image">新闻图片URL</label>
                <input type="text" id="image" v-model="image" placeholder="请输入新闻图片URL" required />
            </div>
            <div>
                <label for="image">新闻类型</label>
                <input type="text" id="type" v-model.number="type" placeholder="请输入新闻类型" required />
            </div>
            <div>
                <label for="publishDate">出版日期</label>
                <input type="date" id="publishDate" v-model="publishDate" required />
            </div>
            <button type="submit">添加新闻</button>
        </form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
const title = ref('');
const content = ref('');
const author = ref('');
const image = ref('');
const type = ref(0);
const publishDate = ref('');
const errorMessages = ref([]);
const submitForm = async () => {
    if (!title.value || !content.value || !author.value || !image.value || !type.value || !publishDate.value) {
        errorMessages.value.push('请确保所有字段都已填写');
        return;
    }
    const productData = {
        title: title.value,
        content: content.value,
        author: author.value,
        image: image.value,
        type: type.value,
        publishDate: publishDate.value
    };

    try {
        const response = await axios.post('http://localhost:3001/addnews', productData, {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const data = response.data;
        if (data != null) {
            alert('新闻添加成功！');
            // 清空表单
            title.value = '';
            content.value = '';
            author.value = '';
            image.value = '';
            type.value = '';
            publishDate.value = '';
        } else {
            alert('添加新闻失败，请重试！');
        }
    } catch (error) {
        console.error('请求失败:', error);
        alert('网络错误，请稍后再试！');
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
}

form div {
    margin-bottom: 15px;
}

label {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

input[type="text"],
input[type="date"],
textarea {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}
</style>